@import '../../styles/variables';
@import '../../styles/mixins';

// Main wrapper, given a height to preserve space in document when content is attached
.pageHeader {
  @include fullWidth();
  position: relative;
  z-index: 500;
}

.content {
  @include contentPadding(0, 0);
  margin-bottom: 2px;

  @include high-contrast {
    border-bottom: 1px solid WindowText;
  }
}

.pageTitle {
  align-items: center;
  color: $ms-color-neutralLighterAlt;
  display: flex;
  font-size: $font-size-biggest;
  font-weight: $ms-font-weight-light;
  line-height: 1;
  padding: 40px 0;
  transition: font-size $ms-animation-duration-1 $ms-animation-ease-1;
}

.pageNav {
  display: none;
}

@media screen and (max-width: $uhf-screen-max-mobile) {
  .pageHeader {
    margin-bottom: -2px;
  }
}

@media screen and (min-width: $uhf-screen-min-mobile) {
  .pageHeader {
    height: $PageHeader-fullHeight;

    &.isAttached {
      .content {
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
        max-width: $App-maximumWidth - $Nav-width;
        position: fixed;
        width: calc(100% - #{$Nav-width} - #{$App-padding-left-lg} - #{$App-padding-right-lg});
        z-index: $ms-zIndex-1;
        height: $PageHeader-attachedTitleHeight + $PageHeader-navHeight;

        @include high-contrast {
          @include ms-border-right(1px, solid, WindowText);
        }
      }

      .pageTitle {
        font-size: $font-size-big;
        font-weight: $ms-font-weight-regular;
        padding-top: 32px;
      }
    }
  }

  .content {
    height: $PageHeader-titleHeight + $PageHeader-navHeight;
    transition: box-shadow $ms-animation-duration-2 $ms-animation-ease-1;
    position: relative;
  }

  .pageTitle {
    font-size: $font-size-huge;
    padding-top: 94px;
  }

  .pageNav {
    display: block;
    height: $PageHeader-navHeight;
    position: absolute;
    bottom: 0;
    margin-bottom: 1px;

    ul {
      display: flex;

      li a {
        color: $ms-color-white;
        display: inline-block;
        font-size: $ms-font-size-l;
        font-weight: $ms-font-weight-semilight;
        height: $PageHeader-navHeight;
        line-height: $PageHeader-navHeight;
        @include ms-margin-right(28px);
        text-decoration: none;
        text-align: center;

        &:hover,
        &.active {
          font-weight: $ms-font-weight-semibold;
        }

        // Make room for the heavier text of the selected state
        &::after {
          color: transparent;
          content: attr(data-title);
          display: block;
          font-weight: bold;
          height: 1px;
          overflow: hidden;
          visibility: hidden;
        }
      }
    }
  }
}

@media screen and (min-width: $ms-screen-min-xl) {
  // The mobile nav is no longer present, so the attached page header is higher up
  .pageHeader.isAttached {
    .content {
      top: 0;
    }
  }
}

// UHF specific breakpoint
@media only screen and (max-width: $uhf-screen-max-lg) and (min-width: $uhf-screen-min-mobile) {
  .pageHeader {
    &.isAttached {
      .content {
        width: calc(100% - #{$Nav-width} - #{$App-padding-right-sm} - #{$App-padding-left-sm});
      }
    }
  }

  .pageNav ul li a {
    @include ms-margin-right(20px);
    font-size: 14px;
  }
}
